<template>
  <div class="page-wrapper">
    <div class="content">
  <!-- 搜索区域 -->
  <div class="search">
    <span>学生姓名：</span>
    <div style="width:200px">
      <el-input
          size="mini"
          v-model="name"
          placeholder="请输入学生姓名"
      />
    </div>
    <el-button size="mini" type="success" @click="loadTable">查询</el-button>
    <el-button size="mini" type="info" @click="toExcel">导出Excel</el-button>
    <el-button size="mini" type="primary" @click="openDrawer = true"
    >添加</el-button
    >
  </div>
  <!-- 表格区域 -->
  <el-table size="mini" :data="tableData" style="width: 99%">
    <el-table-column prop="id" label="编号" width="150" />
    <el-table-column prop="name" label="学生姓名" width="170" />
    <el-table-column prop="num" label="学生学号" width="170" />
    <el-table-column prop="class" label="所在班级" width="180" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button  size="mini" type="warning" @click="handleEdit(scope.row)"
        >编辑</el-button
        >
        <el-button  size="mini" type="danger" @click="handleDelete(scope.row)"
        >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <div class="pagination">
    <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="total"
        v-model:current-page="pageIndex"
    >
    </el-pagination>
  </div>
  <!-- 抽屉区域 -->
  <el-drawer
      v-model="openDrawer"
      :title="isAdd ? '添加学生' : '修改学生'"
      direction="rtl"
      size="30%"
      :before-close="drawerClose"
  >
    <div class="">
      <span>学生姓名：</span>
      <div>
        <el-input
            size="mini"
            v-model="formData.name"
            placeholder="请输入学生姓名"
        />
      </div>
    </div>
    <div class="">
      <span>学生学号：</span>
      <div>
        <el-input
            size="mini"
            v-model="formData.num"
            placeholder="请输入学号"
        />
      </div>
    </div>
    <div class="">
      <span>所在班级：</span>
      <div>
        <el-input
            size="mini"
            v-model.number="formData.class"
            placeholder="请输入所在班级"
        />
      </div>
    </div>
    <div class="">
      <span></span>
      <div>
        <el-button size="mini" type="primary" @click="editForm">{{
            isAdd ? "添加" : "修改"
          }}</el-button>
        <el-button size="mini" type="default" @click="clearFormData"
        >取消</el-button
        >
      </div>
    </div>
  </el-drawer>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs} from "vue";
import { list,add,update,del } from "@/api/student";
import {xlsx} from "@/utils/xlsx";

export default {
  name: "ViewStudent",
  setup() {

    let data = reactive({

      tableData: [],

      name: "",

      pageIndex: 1,

      pageSize: 10,

      total: 0,

      openDrawer: false,

      isAdd: true,

      formData: {
       num:'',
        name:'',
       class:''
      },
    });
    let loadTable = async () => {

      let params = {
        pageIndex: data.pageIndex,
        pageSize: data.pageSize,
        name: data.name,
      };

      let { data: studentData, count } = await list(params);

      data.tableData = studentData;

      data.total = count;
    };

    loadTable();


    let editForm = async () => {
      let r = false;

      if (data.isAdd) {
        r = await add(data.formData);
        if (r) {

          clearFormData();
        }
      } else {
        r = await update(data.formData);
      }

      if (r) {

        await loadTable();
      }
    };


    let clearFormData = () => {

      data.formData = {
        num:'',
        name:'',
        class:''
      };
    };


    let drawerClose = () => {

      data.openDrawer = false;
      data.isAdd = true;

      clearFormData();
    };


    let handleEdit = (row) => {

      data.formData = { ...row };

      data.isAdd = false;

      data.openDrawer = true;
    };


    let handleDelete = async (row) => {

      let { id } = row;
      let r = await del({ id });

      if (r) {

        loadTable();
      }
    };


    let toExcel = ()=>{

      let excelData = data.tableData.map(r=>{
        return {
          id:r.id,
         num:r.num,
          name:r.name,
        class:r.class

        }
      })

      let excelHeader = {
        id:'学生编号',
        name:'学生姓名',
        num:'学生学号',
        class:'所在班级',


      }

      xlsx(excelData,excelHeader,'学生信息')
    }

    return {
      ...toRefs(data),
      loadTable,
      editForm,
      drawerClose,
      handleEdit,
      handleDelete,
      clearFormData,
      toExcel
    };
  },
};
</script>
<style scoped lang="scss"></style>
